<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一次作业-登录</title>
</head>
<h1 align="center">北邮风流</h1>
<style type="text/css">
	body{ 
		background:url(background.jpg) no-repeat; 
		background-size:cover; 
		font-weight:bolder}
	h1{color:white;font:44px/1.5 Tahoma,Helvetica,Arial,'华文中宋','宋体',sans-serif;}
	p1,p2,p3,a
	{color:white;
	font: 24px/1.5 Tahoma,Helvetica,Arial,'华文中宋','宋体',sans-serif;}
</style>
<body>
<form id="loginform" action="信通1.html" method="post">
    <fieldset><legend><p1>用户登录</p1></legend>
	<p2>用户名 :<input type="text" name="name" id="username" size="20"/></p2><span id="s1"></span><br><br>
	<p3>登录密码:<input type="password" name="psw" id="psw" size="20"/></p3><span id="s2"></span><br><br>
	<input type="submit" name="submit" id="login" value="登录" onClick="">
	<input type="reset" name="Reset" value="清除输入"/>
    </fieldset></form>
	<a href="register.html" >还没有账号？点这里赶快注册<br><br><br><br><br><br></a>
    <img src="buptlogo.png" alt="Beijing University of Posts and Telecommunication" align="right" width="400" height="120">
</body>
<script type="text/javascript">
var loginform=document.getElementById("loginform");
var s1=document.getElementById("s1");
var s2=document.getElementById("s2");
loginform.addEventListener("submit",function(event){
var username=document.getElementById("username").value,
    password=document.getElementById("psw").value;
	if (!checkuser(username,password)) {
	event.preventDefault();		
	s1.innerHTML="抱歉~用户不存在或密码错误";
	s1.style.cssText="color:White";}},false);

function checkuser(username,password){
	for(var i=0;i<localStorage.length;i++){  //调用key方法获取localStorage中数据对应的键名  
      //localStorage.key(0)对应data1  
      var getKey=localStorage.key(i);  
	  if(getKey.substring(0,6)==="userID"){ 
      //通过键名获取值，包括用户名称、用户密码进行匹配
	  	var str=localStorage.getItem(getKey);  
	  	var data=JSON.parse(str);
		if (username===data.username && password===data.password)
			{return true;}
	  }
	}
	return false;
}// JavaScript Document

</script>
</html>
